<template>
	<div>
		<div >
			<div class="charts-title">
				<h2>BMI变化</h2>
			</div>
			<div id="chart"
				style="width: 900px; height: 400px; margin-left: 150px; border: 1px solid gainsboro; background-color: aliceblue;">
			</div>
		</div>
		<div style="margin-left: 200px; margin-top: 50px;width:800px">
			<template>
				<el-table :data="bodyData" stripe style="width: 100%">
					<el-table-column prop="submitTime" label="日期" width="400">
					</el-table-column>
					<el-table-column prop="bmi" label="BMI" width="400">
					</el-table-column>

				</el-table>
			</template>

		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: "",
		data() {
			return {
				charts: '',
				opinionData: ["3", "2", "4", "4", "5"],
				bodyData: '',
				bmi: new Array(5),
			};
		},
		methods: {
			drawLine(id) {
				this.charts = echarts.init(document.getElementById(id));
				this.charts.setOption({
					tooltip: {
						trigger: "axis",
					},
					legend: {
						data: ["近五次BMI记录"],
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: ["1", "2", "3", "4", "5"],
					},
					yAxis: {
						type: "value",
						min: 13,
						max: 34,
						axisLabel: {
							formatter: '{value} '
						},
					},

					series: [{
						name: "进五次体重记录",
						type: "line",
						stack: "总量",
						data: [1, 2, 3, 4, 5],
					}, ],
				});
			},
			drawChartWithData() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('chart'));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						icon: 'rect',
						itemWidth: 10,
						itemHeight: 10,
						itemGap: 20,
						data: this.bmi,
						left: 30
					},
					grid: {
						left: '4%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						data: [1, 2, 3, 4, 5],
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: this.bmi,
						type: 'line'
					}]
				})
			},
			getList() {
				this.axios.get("http://localhost:8080/user/bodyData/" + 1).then(res => {
					console.log(res.data.data);
					this.bodyData = res.data.data;
					// console.log(this.bodyData.userWeight)
					for (var i = 0; i < 5; i++) {
						this.bmi[i] = this.bodyData[i].bmi;
					}
					// alert(this.weights);
					this.drawChartWithData();
				})
			},
		},
		//调用
		mounted() {
			this.$nextTick(function() {
				this.drawLine("chart");
			});
		},
		created() {
			this.getList();
		}
	};
</script>

<style>

</style>
